<template>
  <div>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="今日订单总量" total="126单">
          <a-tooltip title="今日所有配送订单总数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">周同比</span>
              12%
            </trend>
            <trend flag="down">
              <span slot="term">日同比</span>
              11%
            </trend>
          </div>
          <template slot="footer">日均订单量<span>58单</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="无人机飞行里程" :total="8846 | NumberFormat">
          <a-tooltip title="所有无人机累计飞行公里数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area />
          </div>
          <template slot="footer">今日飞行里程<span> {{ '234' | NumberFormat }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="配送完成订单" :total="6560 | NumberFormat">
          <a-tooltip title="已完成配送的订单数量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar />
          </div>
          <template slot="footer">完成率 <span>92%</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="无人机在线率" total="78%">
          <a-tooltip title="当前在线无人机占总数的比例" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
          </div>
          <template slot="footer">
            <trend flag="down" style="margin-right: 16px;">
              <span slot="term">周同比</span>
              12%
            </trend>
            <trend flag="up">
              <span slot="term">日同比</span>
              80%
            </trend>
          </template>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{width: '256px'}" />
          </div>
          <a-tab-pane loading="true" tab="订单趋势" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="orderData" title="订单量趋势" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="配送区域排名" :list="areaRankList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="无人机飞行" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="flightData" title="飞行里程趋势" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="无人机飞行排名" :list="droneRankList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="!isMobile && 'desktop'">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" title="热门配送地区" :style="{ height: '100%' }">
            <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
              <a class="ant-dropdown-link" href="#">
                <a-icon type="ellipsis" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;">导出数据</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">查看更多</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
            <a-row :gutter="68">
              <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
                <number-info :total="12321" :sub-total="17.1">
                  <span slot="subtitle">
                    <span>订单总量</span>
                    <a-tooltip title="所有区域的订单总量" slot="action">
                      <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
                    </a-tooltip>
                  </span>
                </number-info>
                <!-- miniChart -->
                <div>
                  <mini-smooth-area :style="{ height: '45px' }" :dataSource="orderTrendData" :scale="orderTrendScale" />
                </div>
              </a-col>
              <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
                <number-info :total="2.7" :sub-total="26.2" status="down">
                  <span slot="subtitle">
                    <span>平均配送时间(小时)</span>
                    <a-tooltip title="订单从创建到完成的平均时间" slot="action">
                      <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
                    </a-tooltip>
                  </span>
                </number-info>
                <!-- miniChart -->
                <div>
                  <mini-smooth-area :style="{ height: '45px' }" :dataSource="deliveryTimeData" :scale="deliveryTimeScale" />
                </div>
              </a-col>
            </a-row>
            <div class="ant-table-wrapper">
              <a-table
                row-key="index"
                size="small"
                :columns="hotAreaColumns"
                :dataSource="hotAreaData"
                :pagination="{ pageSize: 5 }"
              >
                <span slot="range" slot-scope="text, record">
                  <trend :flag="record.status === 0 ? 'up' : 'down'">
                    {{ text }}%
                  </trend>
                </span>
              </a-table>
            </div>
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="订单类型占比" :style="{ height: '100%' }">
            <div slot="extra" style="height: inherit;">
              <span class="dashboard-analysis-iconGroup">
                <a-dropdown :trigger="['click']" placement="bottomLeft">
                  <a-icon type="ellipsis" class="ant-dropdown-link" />
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a href="javascript:;">导出数据</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="javascript:;">查看更多</a>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </span>
              <div class="analysis-salesTypeRadio">
                <a-radio-group defaultValue="a">
                  <a-radio-button value="a">全部渠道</a-radio-button>
                  <a-radio-button value="b">线上订单</a-radio-button>
                  <a-radio-button value="c">门店订单</a-radio-button>
                </a-radio-group>
              </div>
            </div>
            <h4>订单类型</h4>
            <div>
              <div>
                <v-chart :force-fit="true" :height="405" :data="pieData" :scale="pieScale">
                  <v-tooltip :showTitle="false" dataKey="item*percent" />
                  <v-axis />
                  <v-legend dataKey="item"/>
                  <v-pie position="percent" color="item" :vStyle="pieStyle" />
                  <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                </v-chart>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 添加回到顶部按钮 -->
    <a-back-top :visibilityHeight="100">
      <div class="back-top-inner">
        <a-icon type="to-top" />
      </div>
    </a-back-top>
  </div>
</template>

<script>
import moment from 'moment'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea
} from '@/components'
import { baseMixin } from '@/store/app-mixin'

// 订单数据
const orderData = []
const flightData = []
for (let i = 0; i < 12; i += 1) {
  orderData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
  flightData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

// 区域排名
const areaRankList = [
  { name: '朝阳区', total: 1234 },
  { name: '海淀区', total: 1156 },
  { name: '西城区', total: 986 },
  { name: '东城区', total: 852 },
  { name: '丰台区', total: 745 },
  { name: '石景山区', total: 688 },
  { name: '通州区', total: 588 }
]

// 无人机排名
const droneRankList = [
  { name: 'UAV-001', total: 1234.5 },
  { name: 'UAV-002', total: 1156.3 },
  { name: 'UAV-003', total: 986.2 },
  { name: 'UAV-004', total: 852.1 },
  { name: 'UAV-005', total: 745.8 },
  { name: 'UAV-006', total: 688.7 },
  { name: 'UAV-007', total: 588.6 }
]

// 订单趋势数据
const orderTrendData = []
for (let i = 0; i < 7; i++) {
  orderTrendData.push({
    x: moment().add(i, 'days').format('YYYY-MM-DD'),
    y: Math.ceil(Math.random() * 10)
  })
}
const orderTrendScale = [
  {
    dataKey: 'x',
    alias: '日期'
  },
  {
    dataKey: 'y',
    alias: '订单量',
    min: 0,
    max: 10
  }]

// 配送时间数据
const deliveryTimeData = []
for (let i = 0; i < 7; i++) {
  deliveryTimeData.push({
    x: moment().add(i, 'days').format('YYYY-MM-DD'),
    y: (Math.random() * 3 + 1).toFixed(1)
  })
}
const deliveryTimeScale = [
  {
    dataKey: 'x',
    alias: '日期'
  },
  {
    dataKey: 'y',
    alias: '小时',
    min: 0,
    max: 5
  }]

// 热门区域数据
const hotAreaData = [
  { index: 1, area: '朝阳区三里屯', count: 568, range: 15, status: 0 },
  { index: 2, area: '海淀区中关村', count: 456, range: 12, status: 0 },
  { index: 3, area: '西城区金融街', count: 366, range: 8, status: 0 },
  { index: 4, area: '东城区王府井', count: 295, range: 6, status: 0 },
  { index: 5, area: '朝阳区望京', count: 243, range: -5, status: 1 }
]

const DataSet = require('@antv/data-set')

// 订单类型数据
const sourceData = [
  { item: '普通配送', count: 45 },
  { item: '加急配送', count: 25 },
  { item: '生鲜配送', count: 15 },
  { item: '医药配送', count: 10 },
  { item: '特殊物品', count: 5 }
]

const pieScale = [{
  dataKey: 'percent',
  min: 0,
  formatter: '.0%'
}]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent'
})
const pieData = dv.rows

export default {
  name: 'Analysis',
  mixins: [baseMixin],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  data () {
    return {
      loading: true,
      areaRankList,
      droneRankList,
      orderTrendData,
      orderTrendScale,
      deliveryTimeData,
      deliveryTimeScale,
      hotAreaData,
      orderData,
      flightData,
      pieScale,
      pieData,
      sourceData,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      }
    }
  },
  computed: {
    hotAreaColumns () {
      return [
        {
          dataIndex: 'index',
          title: '排名',
          width: 90
        },
        {
          dataIndex: 'area',
          title: '区域'
        },
        {
          dataIndex: 'count',
          title: '订单量'
        },
        {
          dataIndex: 'range',
          title: '周同比',
          align: 'right',
          sorter: (a, b) => a.range - b.range,
          scopedSlots: { customRender: 'range' }
        }
      ]
    }
  },
  created () {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  },
  methods: {
    // 可以添加一个手动滚动到顶部的方法
    scrollToTop () {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    :deep(.ant-card-head) {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }

  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }

  // 回到顶部按钮样式
  .back-top-inner {
    height: 40px;
    width: 40px;
    line-height: 40px;
    border-radius: 4px;
    background-color: #1890ff;
    color: #fff;
    text-align: center;
    font-size: 20px;

    &:hover {
      background-color: #40a9ff;
    }
  }
</style>
